<template>
  <!-- 费用结算页面 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="住 院 费 用 管 理">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 下拉刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <div class="content">
        <!-- <div style="text-align: center">当前是病例编号为{{ id }}的病人</div> -->
        <div class="details">
          <div class="portrait">
            <img src="../../assets/images/touxiang.webp" alt="" />
          </div>
          <div class="information">
            <p>病例编号：{{ id }}</p>
            <p>姓名：{{ patient.name }}</p>
            <p>身份证：{{ patient.idCard }}</p>
            <p>性别：{{ patient.sex }}</p>
          </div>
        </div>
        <!-- 费用 -->
        <div class="main">
          <p>{{ msg }}</p>
          <div class="cost">
            <mt-badge size="small" type="warning"
              >已产生费用：{{ patient.priceTotal }}</mt-badge
            >
            <span class="detail" @click="showCostPopup">查看费用产生详情</span>
          </div>
          <div class="cost2">
            <mt-badge size="small" type="warning"
              >已支付费用：{{ patient.payPrice }}</mt-badge
            >
          </div>
          <div class="surplus">
            <p>总共剩余未支付医疗费用：{{ surplus }}￥</p>
            <van-button
              round
              block
              @click="showPay"
              color="linear-gradient(to right, #05c46b,#0be881)"
            >
              支付剩余费用
            </van-button>
          </div>
        </div>
      </div>
    </van-pull-refresh>

    <!-- 通知栏 -->
    <div class="Notice">
      <van-notice-bar
        left-icon="volume-o"
        mode="closeable"
        text="为响应国家医疗保障要求，各地医保经办机构要按规定落实相关政策，放宽参保缴费时限。"
      />
    </div>

    <!-- 弹出层 -->
    <!-- 查看费用详情的弹出层 -->
    <van-popup
      v-model="IsCostShow"
      position="bottom"
      :style="{ height: '70%' }"
    >
      <van-collapse v-model="activeNames" accordion>
        <van-collapse-item
          v-for="(item, index) in CostList"
          :key="index"
          :title="item.medication"
          value="查看详情"
          :label="'数量：' + item.num"
        >
          <p>开药时间{{ item.createTime }}</p>
        </van-collapse-item>
      </van-collapse>
    </van-popup>

    <!-- loading加载 -->
    <!-- <div class="loade">
      <van-popup> </van-popup>
    </div> -->

    <!-- 付款中遮罩层 -->
    <van-overlay :show="Isshadow">
      <div class="loade" @click.stop>
        <van-loading color="#0094ff" vertical text-size="16"
          >自动付款中...</van-loading
        >
      </div>
    </van-overlay>

    <!-- 付费手机获取验证码弹出框 -->
    <van-dialog
      v-model="IsPaidshow"
      title="获取验证码以支付"
      show-cancel-button
      :show-confirm-button="false"
      cancel-button-text="关闭页面"
    >
      <!-- 注册表单 -->
      <van-form>
        <van-field
          name="手机号"
          label="手机号"
          placeholder="手机号"
          v-model="payMsg.phone"
        />
        <van-field
          name="验证码"
          label="验证码"
          placeholder="验证码"
          :border="false"
          use-button-slot
          v-model="payMsg.verifyCode"
        >
          <van-button
            slot="button"
            size="small"
            type="primary"
            :disabled="!isClick"
            @click="gainCode"
            >{{ time }}</van-button
          >
        </van-field>

        <div style="margin: 16px">
          <van-button round block type="info" @click="GopayCost"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import { Notify } from "vant";
import { Toast } from "vant";
import { Dialog } from "vant";
export default {
  name: "SettlementCost",

  data() {
    return {
      id: "", //病人编号
      surplus: null, //剩余差价
      activeNames: "1",
      msg: "",
      IsPaidshow: false, // 获取验证码弹出框是否显示
      isClick: true, //获取验证码按钮是否能点击
      IsCostShow: false, //查看费用详情弹出框是否显示
      Isshadow: false, //遮挡层是否显示
      isLoading: false,
      //当前编号病人信息
      patient: {},
      //费用详情数据
      CostList: [],
      time: "获取验证码",
      //支付需传递参数对象
      payMsg: {
        phone: "",
        verifyCode: "", //验证码
      },
    };
  },
  created() {
    //页面一进来先获取病人编号Id
    this.id = this.$route.query.pid;
    //页面进来就获取当前编号病人的信息
    this.getMsg(this.id);
  },
  mounted() {
    this.surplus = this.patient.generatedCost - this.patient.paid;
    this.msg = this.getTime();
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    //获取当前时间
    getTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let msg = "截止" + year + "年" + month + "月" + day + "日";
      return msg;
    },
    //页面进来就获取当前编号病人的信息
    getMsg(id) {
      this.$http.get("charge/" + id, {}).then((res) => {
        console.log(res);
        let cardId = res.data.data.idCard;
        this.getPaidMsg(cardId);
        this.patient = res.data.data;
        //将id与idcard传递给payMsg支付对象
        this.payMsg.id = res.data.data.id;
        this.payMsg.idCard = cardId;

        this.surplus = this.patient.priceTotal - this.patient.payPrice;
        this.payMsg.money = this.surplus;

        if (this.surplus > 0) {
          Notify({
            type: "success",
            message: "有医疗费用暂未支付",
            duration: 2000,
          });
        }
      });
    },
    //费用产生记录
    getPaidMsg(id) {
      this.$http.get("medication-log/card/" + id, {}).then((res) => {
        console.log(res);
        this.CostList = res.data.data;
      });
    },
    //费用详情弹出层
    showCostPopup() {
      this.IsCostShow = true;
    },

    //支付按钮点击判断是否需要弹出验证码框
    showPay() {
      if (this.surplus > 0) {
        this.IsPaidshow = true;
      } else {
        Toast("当前病人不需要支付费用");
      }
    },

    //获取验证码按钮点击
    gainCode() {
      // console.log(this.userRegiste.phone);
      if (this.payMsg.phone.trim() == "") {
        Toast("请先输入手机号");
      } else if (this.payMsg.phone.length != 11) {
        Toast("请输入正确11位手机号");
      } else {
        this.isClick = false;
        let second = 180;
        this.time = second + "s";
        this.getCode();
        let timeID = setInterval(() => {
          second--;
          this.time = second + "s";
          if (second < 0) {
            this.time = "重新获取";
            this.isClick = true;
            clearInterval(timeID);
          }
        }, 1000);
      }
    },

    //获取验证码接口
    getCode() {
      this.$http
        .get("sms/sendSmsPhone/" + this.payMsg.phone, {})
        .then((res) => {
          console.log(res);
          Toast("验证码发送成功");
        });
    },

    //支付提交按钮点击,验证表单
    GopayCost() {
      if (
        this.payMsg.phone.trim() == "" ||
        this.payMsg.verifyCode.trim() == ""
      ) {
        Toast("请先完整填写表单");
      } else {
        Dialog.confirm({
          title: "确认支付",
          message: "是否确认支付剩余医疗费用" + this.surplus + "元",
          confirmButtonColor: "#07c160",
          cancelButtonColor: "#ff976a",
        })
          .then(() => {
            //调用支付接口
            this.GoPayApi();
          })
          .catch(() => {
            console.log("取消支付");
          });
      }
    },
    //支付接口
    GoPayApi() {
      console.log(this.payMsg);
      this.$http.post("charge/payMoney", this.payMsg).then((res) => {
        console.log(res);
        this.IsPaidshow = false;
        this.Isshadow = true;

        setTimeout(() => {
          this.Isshadow = false;
          this.paidSuccess();
        }, 1800);
        this.paidSuccess();
      });
    },
    //支付成功反馈
    paidSuccess() {
      if (this.Isshadow == false) {
        this.surplus = 0;
        Toast.success({
          message: "支付成功，若数据未改变请下拉刷新",
          duration: 2000,
        });
      }
      this.getMsg(this.id);
    },
    //下拉刷新事件
    onRefresh() {
      console.log(6);
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },

    showPopup() {
      this.isLoading = true;
    },
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
.content {
  padding-bottom: 66px;
}
.main {
  margin-top: 25px;
  padding: 0 10px;
  p {
    margin-bottom: 10px;
    color: #05c46b;
    font-weight: 650;
    font-size: 18px;
    text-align: center;
    padding: 5px 0;
  }
}
.details {
  display: flex;
  align-items: center;
  .portrait {
    width: 120px;
    height: 120px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .information {
    padding-left: 5px;
    p {
      padding: 5px 0;
    }
  }
}
.cost,
.cost2 {
  display: flex;
  padding-top: 10px;
  /deep/ .mint-badge {
    margin-left: 0;
    font-size: 17px;
    justify-content: flex-start;
    display: flex;
  }
  span {
    margin-left: auto;
    text-align: right;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    font-weight: 700;
  }
  .detail {
    color: #1dd1a1;
    border-bottom: 2px solid;
  }
  .detail:after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #1dd1a1;
    border-radius: 50%;
    margin-left: 2px;
  }
}
.cost2 {
  margin-top: 8px;
  /deep/ .mint-badge {
    background-color: #48dbfb;
  }
}
.surplus {
  font-size: 18px;
  font-weight: 600;
  margin-top: 25px;
}
.loade {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /deep/ .van-loading__text {
    font-weight: 700;
  }
}
</style>